<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <script src="../vue.min.js"></script>
</head>
<body>
    <div class="container" id="mainConnect">
        <div class="panel panel-default">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">用户管理页面</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <input type="input" class="form-control" v-model.number='search' @input="" value="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-1">
                            <div class="form-group">
                                <input type="button" @click="searchUser" class="form-control" value="查询">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 新增 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">新增用户</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label for="">用户编号</label>
                                <input type="input" class="form-control" v-model.number="userInfo.userId" value="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label for="">用户名称</label>
                                <input type="input" class="form-control" v-model.number="userInfo.userName" value="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label for="">用户电话</label>
                                <input type="input" class="form-control" v-model="userInfo.userTele" value="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label for="">用户性别</label>
                                <input type="input" class="form-control" v-model="userInfo.userSex" value="" placeholder="Input field">
                            </div>
                        </div>
                        <div class="col-xs-1">
                            <div class="form-group">
                                <input type="button" @click="submitUser" class="form-control btn-success" value="提交" placeholder="Input field">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 查询 -->
            <div class="panel panel-default">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">用户页面</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>用户编号</th>
                                    <th>用户姓名</th>
                                    <th>用户手机</th>
                                    <th>用户性别</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in userList" v-show="!item.hide" :key="`user-key-${i}`">
                                    <td>{{item.userId}}</td>
                                    <td>{{item.userName}}</td>
                                    <td>{{item.userTele}}</td>
                                    <td>{{item.userSex}}</td>
                                    <td>
                                        <button type="button" @click="editUser(item)" class="btn btn-xs btn-primary">编辑</button>
                                        <button type="button" @click="deleteUser(item)" class="btn btn-xs btn-danger">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>    
        </div>
    </div>
    <script>
        new Vue({
            el:'#mainConnect',
            data() {
                return {
                    search: '',
                    userInfo: {
                        userId: '',
                        userName: '',
                        userTele: '',
                        userSex: ''
                    },
                    isModify: false,
                    userList: []
                }
            },
            methods: {
                /** 搜索用户 */
                searchUser() {
                    console.log(this.search)
                    var temp = []
                    this.userList.forEach(user => {
                        user.hide = user.userName.indexOf(this.search) < 0
                        temp.push(user)
                    });
                    this.userList = temp
                },
                /** 提交用户 */
                submitUser() {
                    console.log(this.userInfo)
                    var obj = JSON.parse(JSON.stringify(this.userInfo))
                    if(this.isModify){
                        var _id = this.userList.findIndex(item => item._id === obj._id)
                        this.userList.splice(_id,1,obj)
                    }else{
                        this.userList.push({...obj,_id: Date.now()})
                    }
                    this.userInfo = {
                        userId: '',
                        userName: '',
                        userTele: '',
                        userSex: ''
                    }
                    this.isModify = false
                },
                /** 编辑用户 */
                editUser(user) {
                    this.isModify = true
                    console.log(JSON.stringify(user))
                    this.userInfo = JSON.parse(JSON.stringify(user));
                },
                /** 删除用户 */
                deleteUser(user) {
                    var _id = this.userList.findIndex(item => item._id === user._id)
                    this.userList.splice(_id,1)
                }
            }
        })
    </script>
</body>
</html>